<template>
  <div :class="['comp_mall-coupon-item-wrap ub_1px', 'coupon-' + info.voucherTType]">
    <div class="title theme-color">
      <div class="df1 dot" v-if="info.voucherTType == 1 || info.voucherTType == 2">
        <span>￥</span><span class="fs24">{{info.voucherTPriceYuan}}</span>
      </div>
      <div class="df1 dot" v-if="info.voucherTType == 3 || info.voucherTType == 5">
        <span class="fs24">1</span><span>次</span>
      </div>
      <div class="df1 dot" v-if="info.voucherTType == 4">
        <span class="fs24">{{info.voucherTPriceYuan}}</span><span>折</span>
      </div>
      <span class="btn ub_1px" @click="getCoupon" v-if="info.isReceive == 0">领取</span>
      <span class="btn" v-if="info.isReceive == 1">已领取</span>
      <span class="btn" v-if="info.isReceive == 2">已领完</span>
    </div>
    <div class="fs12 c666">
      <div v-if="info.voucherTType == 3 || info.voucherTType == 5">{{info.voucherTTitle}}</div>   <!--许江辉说：目前包邮券、线下券一次且无门槛使用-->
      <div v-else-if="!info.voucherTLimitYuan || info.voucherTLimitYuan == 0">无门槛使用</div>
      <div v-else>满{{info.voucherTLimitYuan}}元可用</div>
      <div>{{info.voucherTType == 5 ? '限线下壹药臻选门店使用' : '限线上壹药臻选商城使用'}}</div>
    </div>
  </div>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
  .comp_mall-coupon-item-wrap {
    padding: 5px 12px 12px 12px;
    &.ub_1px {
      &:before {
        border-radius: 16px;
      }
    }
    .title {
      display: flex;
      align-items: center;
      .btn {    /*满减券*/
        font-size: 13px;
        color: $themeColor;
        padding: 2px 12px;
        &.ub_1px {
          &:before {
            border-radius: 30px;
            border-color: $themeColor;
          }
        }
      }
    }

  }

  /*线下券*/
  .coupon-5 {
    .title {
      color: #EC8F34;
      .btn {
        color: #EC8F34;
        &.ub_1px {
          &:before {
            border-color: #EC8F34;
          }
        }
      }
    }
  }

  /*包邮券*/
  .coupon-3 {
    .title {
      color: #5394EE;
      .btn {
        color: #5394EE;
        &.ub_1px {
          &:before {
            border-color: #5394EE;
          }
        }
      }
    }
  }

  /*折扣券*/
  .coupon-4 {
    .title {
      color: #F25B5B;
      .btn {
        color: #F25B5B;
        &.ub_1px {
          &:before {
            border-color: #F25B5B;
          }
        }
      }
    }
  }
</style>

<script type="text/babel">
  /**
   * Author: Lily Jiang
   * Create Time: 2019/10/9
   * Description:
   */

  export default {
    name: "CouponItem",
    components: {},
    props: {
      info: {
        type: Object,
        default: () => {
          return {}
        }
      },
      index: {}
    },
    data() {
      return {}
    },
    computed: {},
    watch: {},
    methods: {
      getCoupon () {
        wx.showLoading()
        this.$api.receiveCoupon({voucherTId: this.info.voucherTId}).then(data => {
          wx.hideLoading()
          wx.showToast({
            title: '领取成功',
            icon: 'none',
            duration: 1500,
          })

          this.info.isReceive = data.isReceive
          if (this.info.isReceive != 0) {
            this.$emit('removeItem', this.index, this.info)
          }
          this.$emit('addCouponItem')
        }, err => {
          wx.hideLoading()
          err.msg && wx.showModal({
            title: '提示',
            content: err.msg,
            success: (res) => {}
          })
        })
      }
    },
    mounted() {
    },
  }
</script>

